import { useRequest } from "ahooks"
import { Button } from "antd"
import { FC, useCallback } from "react"

type A = { number: number }

function createStore(): [A | undefined, typeof setState] {
    const { data, run } = useRequest<A, [A]>(
        (props: A) => {
            if (props) {
                return Promise.resolve(props)
            }
            return Promise.resolve({ number: 1 })
        },
        {
            cacheKey: "number"
        }
    )

    const setState = useCallback((newValue: A) => {
        run(newValue)
    }, [])

    return [data, setState]
}

const Child: FC = () => {
    const [state, setState] = createStore()

    if (!state) return null

    return (
        <div className="flex gap-2 items-center">
            <div>Child：</div>
            <h1>{state.number}</h1>
            <Button type="primary" onClick={() => setState({ number: state.number + 1 })}>
                +1
            </Button>
        </div>
    )
}

const App = () => {
    const [state, setState] = createStore()

    if (!state) return null

    return (
        <div className="h-screen flex flex-col items-center justify-center gap-4">
            <Child />
            <div className="flex items-center gap-2">
                <div>App:</div>
                <div>{state.number}</div>
                <Button type="primary" onClick={() => setState({ number: state.number + 1 })}>
                    +1
                </Button>
            </div>
        </div>
    )
}

export default App